<template>
    <el-tabs v-model="activeName">
      <el-tab-pane label="执行日志" name="first">
      <el-card class="logger">
        <el-row>
        <el-col :span="18">
          <h3>
          执行日志
          &nbsp;
          <el-tag effect="dark" v-if="mode=='pump'">买入</el-tag>
          <el-tag effect="dark" v-if="mode=='dump'">卖出</el-tag>
          <el-tag effect="dark" v-if="mode=='mixed'">混合</el-tag>
          <el-tag effect="dark" v-if="mode=='volume'">刷交易量</el-tag>
          <el-tag effect="dark" v-if="mode=='swing'">高抛低吸</el-tag>
          &nbsp;
          <el-tag effect="dark" v-if="!running" type="danger">已停止</el-tag>
          <el-tag effect="dark" v-if="running">执行中...</el-tag>
          &nbsp;
          <el-tag effect="light">{{token.pair}}：{{token.price}}</el-tag>
        </h3>
        </el-col>
        <el-col :span="6" style="margin-top: 20px;text-align: right;">
          <el-button type="primary" @click="handleClear">清除日志</el-button>
        </el-col>
        </el-row>
       
        <el-table
          :data="logs"
          height="710"
          style="width: 100%"
          cell-class-name="logger-cell-style"
          empty-text="暂无执行记录"
        >
          <el-table-column prop="timestamp" label="时间" width="80" align="center">
            <template #default="{row}">
              {{ new Date(row.timestamp).toLocaleTimeString() }}
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作" width="90"  align="center"/>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default="{row}">
              <el-tag :type="statusTagType(row.status)" effect="dark">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="message" label="日志">
            <template #default="{row}">
              {{ row.message }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>

    </el-tab-pane>
    <el-tab-pane label="" name="second">
      
    </el-tab-pane>
    
  </el-tabs>
  

      
</template>

<script setup>
import { onMounted, ref,inject } from 'vue'
import { reactive } from 'vue'
import { useConfigStore } from '@/stores/configStore'
const config = useConfigStore()

const logs = ref([])
const activeName = ref('first')

const trade = inject('trade');
const mode = ref('pump')
const running = ref(false)

const token = ref({})

const statusTagType = (status) => {
  switch(status.toLowerCase()) {
    case 'info': return 'primary'
    case 'success': return 'success'
    case 'warn': return 'warning'
    case 'error': return 'danger'
    default: return 'info'
  }
}

const shortenHash = (hash) => {
  return hash ? `${hash.substring(0, 6)}...${hash.substring(hash.length - 4)}` : ''
}

const formatter = (row, column) => {
  if (column === 'updatetime') {
    return new Date(row[column]).toLocaleString()
  }
  return row[column]
}


setInterval(async ()=>{
  token.value=await trade.value.getToken();
},5000)

// 暴露添加日志的方法
const addLog = (log) => {
  logs.value.unshift({
    timestamp: Date.now(),
    ...log
  })
}

const log=(action,message,status)=>{
  if(!status){
    status='info';
  }
  addLog({action:action,message:message,status:status});
}


const info=(action,message)=>{
  log(action,message,'info')
}

const success=(action,message)=>{
  log(action,message,'success')
}

const warning=(action,message)=>{
  log(action,message,'warn')
}

const warn=(action,message)=>{
  log(action,message,'warn')
}

const error=(action,message)=>{
  log(action,message,'error')
}

const debug=(action,message)=>{
  console.log(action," ",message);
  // log(action,message,'info')
}

const trace=(action,message)=>{
  // console.log(action," ",message);
}


const start=()=>{
  const config=trade.value.getConfig();
  mode.value=config.mode;
  running.value=true
}

const stop=()=>{
  running.value=false
}

const handleClear=() => {
  logs.value = []
}


function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

function updateMode(tradingMode) {
  mode.value = tradingMode;
}


defineExpose({
  start,stop,
  addLog,debug,info,warn,error,success,trace,updateMode })
</script>

<style>
.el-table td.el-table__cell div{
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
</style>